<template>
  <div class="ai-card">
    <!-- 头部区域 -->
    <div class="header">
      <div class="logo-info">
        <img :src="logoUrl" alt="随机Logo" />
      </div>
      <div class="title-dropdown">
        <span class="title">AI论文润色</span>
        <el-select class="custom-select" v-model="selectedService" placeholder="请选择">
          <el-option label="AI润色" value="aiPolish"></el-option>
          <el-option label="内容生成" value="contentGen"></el-option>
        </el-select>
      </div>
    </div>
    <!-- 内容区域 -->
    <div class="content">
      <el-input
        class="custom-input"
        type="textarea"
        :rows="4"
        placeholder="请输入要润色的论文"
        v-model="paperContent"
      ></el-input>
      <el-button class="custom-button" type="primary" @click="polishPaper">润色</el-button>
    </div>
    <!-- 底部区域 -->
    <div class="footer">
      <div class="suggestion-box">
        <span>修改建议：</span>
        <p class="polished-box-content">{{ formattedSuggestionText }}</p>
      </div>
      <div class="polished-box">
        <span>润色后论文：</span>
        <p class="polished-box-content">{{ formattedPolishedText }}</p>
        <el-button type="primary" @click="copyText">一键复制</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElSelect, ElOption, ElInput, ElButton } from 'element-plus'

// 随机Logo URL
const logoUrl = ref('https://placekitten.com/50/50')
// 选择的服务
const selectedService = ref('')
// 修改建议文本
const suggestionText = ref('这里显示修改建议')
// 润色后的论文文本
const polishedText = ref('这里显示润色后的论文')
// 存储输入框中的论文内容
const paperContent = ref('')

const formattedPolishedText = computed(() => {
  return polishedText.value.replace(/\\n/g, '\n').slice(0, -2)
})

const formattedSuggestionText = computed(() => {
  return suggestionText.value.replace(/\\n/g, '\n').slice(0, -2)
})

// 润色论文函数
async function polishPaper() {
  const requestData = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ content: paperContent.value }) // 将论文内容转为JSON字符串
  }

  try {
    const response = await fetch('http://localhost:8081/ai/embellishPaper', requestData)
    if (response.ok) {
      const jsonResponse = await response.json()
      if (jsonResponse.succeed) {
        suggestionText.value = jsonResponse.context.suggest // 设置修改建议
        polishedText.value = jsonResponse.context.new_content // 设置润色后的内容
      } else {
        console.error('润色失败')
      }
    } else {
      console.error('网络请求失败')
    }
  } catch (error) {
    console.error('请求错误: ', error)
  }
}

// 一键复制函数
function copyText() {
  // 执行复制操作
}
</script>

<style scoped>
.ai-card {
  background-color: rgba(173, 216, 230, 0.3);
  border-radius: 15px; /* 更圆滑 */
  width: 1000px; /* 宽度增大 */
  padding: 30px; /* 内边距增大 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-info img {
  width: 30px; /* 图标尺寸适当增大 */
  height: 30px;
}

.title-dropdown {
  display: flex;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: 600;
  margin-right: 15px; /* 增加间距 */
}

.custom-select .el-input {
  border: 1px solid #4caf50;
  border-radius: 30px; /* 更圆滑 */
}

.custom-input .el-input__inner {
  border: 1px solid #4caf50;
  border-radius: 30px; /* 更圆滑 */
  /* resize: none; 去掉右下角三条斜线 */
}

.content {
  margin-top: 30px; /* 增加间距 */
}

.custom-button {
  opacity: 0.8; /* 添加透明度 */
  margin-top: 20px; /* 与文本框距离增加 */
}

.footer {
  margin-top: 30px; /* 增加间距 */
}

.suggestion-box,
.polished-box {
  white-space: pre-line;
  margin-top: 20px; /* 增加间距 */
}

.polished-box-content {
  white-space: pre-line; /* 使换行符生效 */
  background-color: rgba(100, 149, 237, 0.2); /* 设置底色，颜色可根据需要调整 */
  padding: 10px; /* 添加内边距 */
  border-radius: 5px; /* 设置圆角 */
}
</style>
